<template>
  <nly-content-wrapper style="overflow-x:hidden;">
    <nly-content-header>
      <nly-row class="col-12">
        <nly-row class="col-12 ">
          <nly-col xs="12"  sm="12" md="12" lg="9" xl="9" class="form-inline" style="justify-content: left;">
          </nly-col>
          <nly-col xs="12" sm="12" md="12" lg="3" xl="3" class="form-inline align-self-start" style="justify-content: right;">
            <nly-button-group>
              <nly-button variant="info" @click="PageList" button-class="mr-2">查询</nly-button>
              <nly-button variant="info" button-class="mr-2" @click="reset">重置</nly-button>
              <nly-button @click="showFunction" variant="info" button-class="mr-2">
                <nly-icon :icon="show ? 'fas fa-angle-down mr-1' : 'fas fa-angle-up mr-1'" />
                {{ show ? "折叠" : "展开" }}
              </nly-button>
            </nly-button-group>
          </nly-col>
        </nly-row>
        
        <nly-row class="ml-1 mb-2 lr mt-4" v-show="show">
          <nly-col xs="12" sm="12" md="12" lg="12" xl="12" class="form-inline" style="justify-content: left;">
            <form-input rightStyle="width:120px;" name="logTitle" title="日志标题" v-model="postData.logTitle"></form-input>
            <form-input rightStyle="width:120px;" name="createByName" title="操作用户" v-model="postData.createByName"></form-input>
            <form-input rightStyle="width:120px;" name="remoteAddr" title="操作ip" v-model="postData.remoteAddr"></form-input>
            <form-rang-date-picker title="操作时间" size="small" rightStyle="min-width: 120px; max-width: calc(410px + 0.25rem);" format="YYYY-MM-DD" v-model="createDate"/>
          </nly-col>
        </nly-row>
      </nly-row>
      <nly-container fluid></nly-container>
    </nly-content-header>
    <div class="tabpanel_tab_spacer"></div>
    <nly-content>
      <a-table 
        :columns="columns"
        :data-source="data"
        :scroll="{ x: 1000, y: 600 }"
        bordered
        :pagination="pagination"
        @change="onTableChange"
      />
    </nly-content>
  </nly-content-wrapper>
</template>

<script>
import FormInput from "../../../components/Form/FormInput.vue";
import { PageList } from "@/api/log";
import moment from "moment";
import getDate from "@/utils/tool/date";
import Sortable from 'sortablejs';

const columns = [
  {
    title: "id",
    dataIndex: "id",
    key: "id",
    width: 80,
  },
  {
    title: "日志标题",
    dataIndex: "logTitle",
    key: "logTitle",
    width: 250,
  },
  {
    title: "请求地址",
    dataIndex: "requestUri",
    key: "requestUri",
    width: 250
  },
  {
    title: "操作ip地址",
    dataIndex: "remoteAddr",
    width: 150,
    key: "remoteAddr"
  },
  {
    title: "操作人",
    dataIndex: "createByName",
    width: 150,
    key: "createByName"
  },
  {
    title: "操作系统",
    dataIndex: "deviceName",
    width: 150,
    key: "deviceName"
  },
  {
    title: "浏览器",
    dataIndex: "browserName",
    width: 150,
    key: "browserName"
  },
  {
    title: "操作时间",
    dataIndex: "createDate",
    width: 180,
    key: "createDate",
    customRender: (text, row, index) => {
      return moment(text).format("YYYY-MM-DD HH:mm");
    }
  },
  {
    title: "响应时间",
    dataIndex: "executeTime",
    width: 100,
    key: "executeTime",
    customRender: (text, row, index) => {
      return text + "毫秒";
    }
  }
];

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};

export default {
  components: { FormInput },
  data() {
    return {
      data: [],
      columns,
      rowSelection,
      endOpen: false,
      createDate: [],
      postData: {
        current: 1,
        size: 20,
        "page.size": 20,
        logTitle: "",
        requestUri: "",
        remoteAddr: "",
        createByName: "",
        beginDate: null,
        endDate: null
      },
      pagination: {
        defaultPageSize: 20,
        current: 1,
        pageSize: 20,
        total: 0,
        showTotal: total => {
          return (
            <div>
              共 {total} 条数据，每页
              <a-input-number
                value={this.pagination.pageSize}
                min={1}
                max={500}
                onPressEnter={e => this.changePageSize(e)}
              />
              条
            </div>
          );
        },
        showQuickJumper: true,
        showLessItems:true
      },
      show: false,
      show2: true,
      modes: ["multi", "single", "range"],
      selectMode: "multi",
      selected: []
    };
  },
  mounted() {
    //为了防止火狐浏览器拖拽的时候以新标签打开，此代码真实有效
    this.PageList();
  },
  methods: {
    changePageSize(e) {
      const value = e.target.value;
      const { pagination } = this;

      console.log(e, value);
      Object.assign(this.postData, {
        "page.size": value
      });
      Object.assign(this.pagination, {
        pageSize: Number.parseInt(value)
      });
      this.PageList();
    },
    showFunction() {
      this.show = !this.show;
    },
    // 获取菜单列表
    PageList() {
      const { postData } = this;
      if (this.createDate != null && this.createDate.length > 1) {
        postData.beginDate = this.createDate[1][0];
        postData.endDate = this.createDate[1][1];
      }
      PageList(postData)
        .then(response => {
          console.log("获取菜单列表", response);
          if (response.code === 200) {
            const { data } = response;
            const { records, total, current, size } = data;
            this.data = records;
            Object.assign(this.pagination, {
              total
            });
          }
        })
        .catch(error => {});
    },
    onTableChange(pagination, filters, sorter) {
      Object.assign(this.postData, {
        current: pagination.current,
        size: pagination.pageSize
      });
      Object.assign(this.pagination, {
        current: pagination.current,
        pageSize: pagination.pageSize
      });
      this.PageList();
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    disabledStartDate(startValue) {
      const endValue = this.postData.endDate;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.postData.beginDate;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    //查询条件重置
    reset() {
      this.postData = {
        "current": 1,
        "size": 20
      };
      this.createDate = [];
    },
  },
  watch: {
  }
};

</script>
<style>
  .time-label{
    font-size:12px;
    color: #666;
    margin-left: 20px;
  }
</style>
